<template>
  <el-drawer v-model="drawer" class="drawer-layout" size="400px" :title="title" direction="rtl"
    :before-close="handleClose" :close-on-click-modal="false">
    <div class="info-container">
      <div class="info-container_body">
        <div class="form-section">
          <el-form ref="refFrom" label-position="top" :model="form.model">
            <AgelFormDesc :items="form.items" :column="1">
              <template #slot-price>
                <div class="dl-flex">
                  <span>{{ centToYuan(form.model.price) + '元' }}</span>
                </div>
              </template>
            </AgelFormDesc>
          </el-form>
        </div>
      </div>
      <div class="info-container_footer">
        <el-button @click="handleClose">取消</el-button>
      </div>
    </div>

  </el-drawer>
</template>

<script setup lang="tsx">
import { BizPriceAccessoryVo, defaultModel } from '@/api/operation/priceAccessory/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { price_type, price_scope } = toRefs<any>(proxy?.useDict('price_type', 'price_scope'));
import { centToYuan, yuanToCent, secToMinu, minuToSec } from '@/utils/index'

const drawer = ref(false)
const title = ref('定价详情')
const form = reactive<any>({
  model: defaultModel(),
  items: [
    { prop: "name", label: "耗材名称", },
    {
      prop: "scope", label: "类型",
      viewFormat: ({ modelValue }: any) => {
        return (<dict-tag options={price_scope.value} value={modelValue} />)
      }
    },
    {
      prop: "priceType", label: "配置类型",
      viewFormat: ({ modelValue }: any) => {
        return (<dict-tag options={price_type.value} value={modelValue} />)
      }
    },
    { prop: "price", label: "单价", slot: 'slot-price', },
    { prop: "remarks", label: "备注", },
  ],
})
const emits = defineEmits(['close'])


const open = (row: BizPriceAccessoryVo) => {
  drawer.value = true
  form.model = row
}
/** 取消 */
const handleClose = () => {
  form.model = defaultModel()
  drawer.value = false
  emits('close')
}
defineExpose({ open })
</script>
